<template>
  <div style="height: 100%;" class="bdso">
    <Split v-model="split">
      <div slot="left" class="w100 h100" style="overflow-y: scroll">
        <Tree :data="data" show-checkbox @on-select-change="click" @on-check-change="select"></Tree>
      </div>
      <div slot="right">
        Right Pane
      </div>
    </Split>

  </div>
</template>

<script>
  import $ from 'jquery'
  import '@/assets/theme/assets/plugins/jstree/jstree.min.js'

  export default {
    name: 'tree',
    data(){
      return{
        data: [
          {
            id: 'parent 1',
            title: 'parent 1',
            expand: true,
            children: [
              {
                id: 'parent 1-1',
                title: 'parent 1-1',
                expand: true,
                children: [
                  {
                    id: 'leaf 1-1-1',
                    title: 'leaf 1-1-1'
                  },
                  {
                    id: 'leaf 1-1-2',
                    title: 'leaf 1-1-2'
                  }
                ]
              },
              {
                title: 'parent 1-2',
                expand: true,
                children: [
                  {
                    title: 'leaf 1-2-1'
                  },
                  {
                    title: 'leaf 1-2-1'
                  }
                ]
              }
            ]
          }
        ],
        split:0.3
      }
    },
    mounted () {

    },
    methods:{
      click(nodes,cur){

      },
      select(nodes,cur){

      },
    }
  }
</script>

<style scoped>
@import "../../assets/theme/assets/plugins/jstree/style.css";
</style>
